<script>
import axios from "axios";

export default {
  data() {
    return {
      obj: {},
      data: [],
      row: {},
      isShow: false,
      option: {
        title: '音乐列表',
        page: false,
        align: 'center',
        menuAlign: 'center',
        column: [
          {
            label: '音乐名称',
            prop: 'musicName'
          },
          {
            label: '歌手',
            prop: 'singer'
          },
          {
            label: '歌词精选',
            prop: 'lyric'
          },
          {
            label: '音频',
            type: "upload",
            prop: 'musicPath',
            dataType: 'object',
            props:{
              label:'name',
              value:'url'
            },
            propsHttp: {
              res: 'data'
            },
            
            action: '/api/musics/addFile',
            /*data:{
              access_token:"74_U_HXTbB_1964UV5aCmVuHwkfvswQK6ohI0eQcV_EF6_Wt0yjeb2lAbL39lgxy9InNof6-whDQVdcvvsko5nGDw8ijNBjNHjQMgvaUfbMWCMJsaLLZFRnjn-dPj4XRHcACAFZP",
              env: "prod-0g36g611fc13d81b",
              path: "G:/wsGZKJ/hospital-vue/src/assets/css/reset.css"
            },*/
          },
          {
            label: '视频',
            type: "upload",
            prop: 'videoPath',
            dataType: 'object',
            props:{
              label:'name',
              value:'url'
            },
            propsHttp: {
              res: 'data'
            },
            action: '/api/musics/addFile',
          },
        ]
      }
    }
  },
  /*https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=wx9273455549562cc4&secret=33205d5793204e43c017696587525919*/
  mounted() {
    this.getList();
  }
  ,
  methods: {
    getList() {
      axios.get('/api/musics/musicList').then(res => {
        this.data = res.data.data;
      })
    }
    ,
   
    handleDetail(path) {
      this.$confirm('是否查看？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        window.open(path);
      });
    }
    ,
    // 增加按钮
    handleRowSave(row, done, loading) {
      row.musicPath = row.musicPath[0].name;
      row.videoPath = row.videoPath[0].name;
      console.log(row)
      axios.post('/api/musics/addMusic', row).then(res => {
        if (res.status == 200){
          this.$message({
            message: '添加成功',
            type: 'success'
          });
        }
        //刷新页面
        this.getList();
      });
     
      done();  // 关闭表单
      loading(); // 按钮停止加载
    }
    ,
    // 修改按钮
    handleRowUpdate(row, index, done, loading) {
      row.musicPath = row.musicPath[0].name;
      row.videoPath = row.videoPath[0].name;
      console.log(row)
      axios.post('/api/musics/addMusic', row).then(res => {
        if (res.status == 200){
          this.$message({
            message: '修改成功',
            type: 'success'
          });
        }
        //刷新页面
        this.getList();
      });
      
      done();  // 关闭表单
      loading(); // 按钮停止加载
      
    }
    ,
    // 删除按钮
    rowDel(row) {
      this.$confirm('是否删除该条信息？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios.get('/api/musics/deleteMusic', {
          params: {
            id: row.id
          }
        }).then(res => {
          if (res.status == 200){
            this.$message({
              message: '删除成功',
              type: 'success'
            });
          }
          //刷新页面
          this.getList();
        });
       
      });
    }
    ,
  }
  ,
}
</script>

<template>
  <div>
    <avue-crud :data="data" :option="option" v-model="obj"
               @row-del="rowDel" @row-save="handleRowSave"
               @row-update="handleRowUpdate"
               >
      <template slot-scope="scope" slot="musicPath">
        <div>
          <el-link @click.stop="handleDetail(scope.row.musicPath)">{{ scope.row.musicPath }}</el-link>
        </div>
      </template>
      <template slot-scope="scope" slot="videoPath">
        <div>
          <el-link @click.stop="handleDetail(scope.row.videoPath)">{{ scope.row.videoPath }}</el-link>
        </div>
      </template>
    </avue-crud>
  </div>
</template>

<style scoped>

</style>